<!-- 查找详情页 -->
<template>
  <div class="search-page">
    <NavBar />
    <div class="main">
      <el-card class="search-card" shadow="hover">
        <div class="wrapper">
          <div class="search-header">
            <h2 class="search-title">
              "<span class="highlight-text">{{ searchText }}</span>"
              <span class="result-count">搜索结果 (257,747)</span>
            </h2>
          </div>

          <el-row :gutter="30">
            <!-- 侧边栏 -->
            <el-col :span="4">
              <div class="sidebar-wrapper">
                <el-menu
                    :default-active="activeIndex"
                    class="category-menu"
                    @select="handleSelect"
                >
                  <el-menu-item index="1" class="menu-item">
                    <i class="fas fa-globe-asia"></i>
                    <span>所有</span>
                    <span class="menu-badge">257,747</span>
                  </el-menu-item>
                  <el-menu-item index="2" class="menu-item">
                    <i class="fas fa-map-pin"></i>
                    <span>目的地</span>
                    <span class="menu-badge">69</span>
                  </el-menu-item>
                  <el-menu-item index="3" class="menu-item">
                    <i class="fas fa-landmark"></i>
                    <span>景点</span>
                    <span class="menu-badge">156</span>
                  </el-menu-item>
                  <el-menu-item index="4" class="menu-item">
                    <i class="fas fa-route"></i>
                    <span>攻略</span>
                    <span class="menu-badge">31,385</span>
                  </el-menu-item>
                  <el-menu-item index="5" class="menu-item">
                    <i class="fas fa-book-open"></i>
                    <span>游记</span>
                    <span class="menu-badge">38,690</span>
                  </el-menu-item>
                </el-menu>
              </div>
            </el-col>

            <!-- 搜索结果网格 -->
            <el-col :span="20">
              <div v-if="activeIndex === '1'">
                <div v-for="(category, index) in categories" :key="index" class="category-section">
                  <div class="category-header">
                    <h3 class="category-title">
                      <i :class="getCategoryIcon(category.title)"></i>
                      {{ category.title }}
                      <span class="category-count">({{ category.items.length }})</span>
                    </h3>
                  </div>

                  <el-row :gutter="24">
                    <el-col
                        :xs="24" :sm="12" :md="8"
                        v-for="(item, itemIndex) in category.items"
                        :key="itemIndex"
                        class="card-col"
                    >
                      <el-card class="item-card" shadow="hover" :body-style="{ padding: '0px' }">
                        <div class="card-img-wrapper">
                          <img :src="item.img" class="card-image">
                          <div class="card-overlay">
                            <el-button type="primary" circle size="small" class="favorite-btn">
                              <i class="far fa-heart"></i>
                            </el-button>
                          </div>
                        </div>
                        <div class="card-content">
                          <h4 class="card-title">{{ item.title }}</h4>
                          <div class="card-info">
                            <div class="location">
                              <i class="fas fa-map-marker-alt"></i>
                              <span>{{ item.location }}</span>
                            </div>
                            <div class="rating">
                              <el-rate
                                  v-model="item.ratingValue"
                                  disabled
                                  text-color="#ff9900"
                                  score-template="{value}"
                                  :show-score="true"
                              >
                              </el-rate>
                            </div>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>

                  <div class="more-button-container">
                    <div class="view-all-wrapper">
                      <el-button
                          type="primary"
                          plain
                          round
                          class="view-more-btn"
                          @click="handleCategoryMore(category.title)"
                      >
                        <span>浏览更多</span>
                        <i class="fas fa-chevron-right"></i>
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>

              <div v-else>
                <div class="category-section">
                  <div class="filter-section">
                    <el-select v-model="filterValue" placeholder="排序方式" class="filter-select">
                      <el-option label="推荐排序" value="recommended"></el-option>
                      <el-option label="热度排序" value="popularity"></el-option>
                      <el-option label="评分排序" value="rating"></el-option>
                    </el-select>
                  </div>

                  <el-row :gutter="24">
                    <el-col
                        :xs="24" :sm="12" :md="8"
                        v-for="(item, index) in currentPageItems"
                        :key="index"
                        class="card-col"
                    >
                      <el-card class="item-card" shadow="hover" :body-style="{ padding: '0px' }">
                        <div class="card-img-wrapper">
                          <img :src="item.img" class="card-image">
                          <div class="card-overlay">
                            <el-button type="primary" circle size="small" class="favorite-btn">
                              <i class="far fa-heart"></i>
                            </el-button>
                          </div>
                        </div>
                        <div class="card-content">
                          <h4 class="card-title">{{ item.title }}</h4>
                          <div class="card-info">
                            <div class="location">
                              <i class="fas fa-map-marker-alt"></i>
                              <span>{{ item.location }}</span>
                            </div>
                            <div class="rating">
                              <el-rate
                                  v-model="item.ratingValue"
                                  disabled
                                  text-color="#ff9900"
                                  score-template="{value}"
                                  :show-score="true"
                              >
                              </el-rate>
                            </div>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>

                  <!-- 分页组件 -->
                  <div class="pagination-container">
                    <el-pagination
                        background
                        layout="prev, pager, next, jumper"
                        :page-size="pageSize"
                        :total="paginationTotal"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    />
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import NavBar from '@/components/NavBar.vue';

const activeIndex = ref('1'); // 默认选中的导航项
const searchText = ref('上海'); // 搜索输入内容
const currentPage = ref(1); // 当前页码
const pageSize = ref(9); // 每页显示的数量
const filterValue = ref('recommended'); // 默认排序方式

// 模拟数据添加评分值
const searchResults = ref([
  { img: 'placeholder.jpg', title: '上海', location: '上海 - 中国', rating: '4.7/5', ratingValue: 4.7, category: '目的地' },
  { img: 'placeholder.jpg', title: '上海迪士尼度假区', location: '上海 - 中国', rating: '4.7/5', ratingValue: 4.7, category: '景点' },
  { img: 'placeholder.jpg', title: '上海老街 (人民路)', location: '上海 - 中国', rating: '4.7/5', ratingValue: 4.7, category: '景点' },
  { img: 'placeholder.jpg', title: '上海野生动物园', location: '上海 - 中国', rating: '4.2/5', ratingValue: 4.2, category: '景点' },
  { img: 'placeholder.jpg', title: '上海星空艺术馆', location: '上海 - 中国', rating: '4.2/5', ratingValue: 4.2, category: '景点' },
  { img: 'placeholder.jpg', title: '上海琉璃艺术博物馆', location: '上海 - 中国', rating: '4.4/5', ratingValue: 4.4, category: '景点' }
]);

const categories = ref([
  { title: '目的地', items: searchResults.value.filter(item => item.category === '目的地') },
  { title: '景点', items: searchResults.value.filter(item => item.category === '景点') },
  { title: '攻略', items: searchResults.value.filter(item => item.category === '攻略') },
  { title: '游记', items: searchResults.value.filter(item => item.category === '游记') }
]);

const filteredResults = computed(() => {
  if (activeIndex.value === '1') {
    return searchResults.value;
  } else if (activeIndex.value === '2') {
    return searchResults.value.filter(item => item.category === '目的地');
  } else if (activeIndex.value === '3') {
    return searchResults.value.filter(item => item.category === '景点');
  } else if (activeIndex.value === '4') {
    return searchResults.value.filter(item => item.category === '攻略');
  } else if (activeIndex.value === '5') {
    return searchResults.value.filter(item => item.category === '游记');
  }
  return [];
});

// 添加分页相关数据和方法
const totalItems = ref({
  destinations: 69, // 目的地总数
  attractions: 156, // 景点总数
  guides: 31385, // 攻略总数
  travelogs: 38690, // 游记总数
});

// 计算分页总数
const paginationTotal = computed(() => {
  if (activeIndex.value === '2') {
    return totalItems.value.destinations;
  } else if (activeIndex.value === '3') {
    return totalItems.value.attractions;
  } else if (activeIndex.value === '4') {
    return totalItems.value.guides;
  } else if (activeIndex.value === '5') {
    return totalItems.value.travelogs;
  }
  return 0;
});

// 计算当前页应显示的数据
const currentPageItems = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredResults.value.slice(start, end);
});

// 获取分类对应的图标
const getCategoryIcon = (category) => {
  switch(category) {
    case '目的地': return 'fas fa-map-marker-alt';
    case '景点': return 'fas fa-landmark';
    case '攻略': return 'fas fa-route';
    case '游记': return 'fas fa-book-open';
    default: return 'fas fa-globe-asia';
  }
};

// 在实际项目中，这里应该调用API获取数据
const fetchPageData = (category, page) => {
  console.log(`获取${category}类别的第${page}页数据，每页${pageSize.value}条`);
  // 实际项目中会有API调用
};

const handleCurrentChange = (val) => {
  currentPage.value = val;

  // 根据当前选中的菜单项确定类别
  let category;
  if (activeIndex.value === '2') {
    category = 'destinations';
  } else if (activeIndex.value === '3') {
    category = 'attractions';
  } else if (activeIndex.value === '4') {
    category = 'guides';
  } else if (activeIndex.value === '5') {
    category = 'travelogs';
  }

  // 调用API获取当前页的数据
  if (category) {
    fetchPageData(category, val);
  }
};

const handleSelect = (key, keyPath) => {
  activeIndex.value = key;
  currentPage.value = 1; // 切换菜单时重置页码
};

const handleCategoryMore = (categoryTitle) => {
  if (categoryTitle === '目的地') {
    activeIndex.value = '2';
  } else if (categoryTitle === '景点') {
    activeIndex.value = '3';
  } else if (categoryTitle === '攻略') {
    activeIndex.value = '4';
  } else if (categoryTitle === '游记') {
    activeIndex.value = '5';
  }
  currentPage.value = 1; // 点击展示更多时重置页码
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* 全局变量定义 */
:root {
  --primary: #ff6b6b;
  --primary-light: #ffb8b8;
  --secondary: #1e88e5;
  --accent: #ffd166;
  --dark: #2d3436;
  --gray: #636e72;
  --light-gray: #f8f9fa;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --gradient: linear-gradient(120deg, #ff6b6b 0%, #ff9e80 100%);
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans SC', sans-serif;
  background: #0e9aa7;
}

.search-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
}

.main {
  padding: 30px;
  display: flex;
  justify-content: center;
}

/* 搜索卡片 */
.search-card {
  width: 90vw;
  max-width: 1400px;
  border-radius: 16px;
  transition: all 0.3s ease;
  margin-bottom: 40px;
  border: none;
  overflow: hidden;
}

.search-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}

.wrapper {
  padding: 15px;
}

/* 搜索标题 */
.search-header {
  margin-bottom: 25px;
  position: relative;
}

.search-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 15px;
}

.highlight-text {
  color: var(--primary);
  position: relative;
  z-index: 1;
}

.highlight-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: rgba(255, 107, 107, 0.2);
  z-index: -1;
}

.result-count {
  font-size: 16px;
  color: var(--gray);
  font-weight: 400;
}

/* 侧边栏 */
.sidebar-wrapper {
  margin-right: 20px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
  z-index: 10;
}

.category-menu {
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: var(--shadow);
  border: none;
}

.menu-item {
  margin: 8px;
  height: 50px;
  line-height: 50px;
  border-radius: 12px;
  font-weight: 500;
  color: var(--dark);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  padding-left: 16px;
}

.menu-item i {
  margin-right: 10px;
  font-size: 18px;
  color: var(--gray);
  width: 24px;
  text-align: center;
}

.menu-item:hover {
  background-color: rgba(30, 136, 229, 0.08);
  color: var(--secondary);
  transform: translateX(5px);
}

.menu-item:hover i {
  color: var(--secondary);
}

.el-menu-item.is-active {
  background: #11BCCC;
  color: var(--secondary);
  margin: 8px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
}

.el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  background: var(--secondary);
  border-radius: 0 4px 4px 0;
}

.el-menu-item.is-active i {
  color: var(--secondary);
}

.menu-badge {
  margin-left: auto;
  background-color: rgba(30, 136, 229, 0.1);
  color: var(--secondary);
  border-radius: 20px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 20px;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 24px;
}

.el-menu-item.is-active .menu-badge {
  background-color: #2093F7;
  color: white;
  box-shadow: 0 2px 4px rgba(30, 136, 229, 0.3);
}

/* 分类部分 */
.category-section {
  margin-bottom: 40px;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.category-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-title i {
  color: var(--primary);
  font-size: 20px;
}

.category-count {
  font-weight: 400;
  color: var(--gray);
  font-size: 16px;
}

/* 卡片部分 */
.card-col {
  margin-bottom: 25px;
}

.item-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  border: none;
}

.item-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.card-img-wrapper {
  position: relative;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.item-card:hover .card-image {
  transform: scale(1.1);
}

.card-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  transition: all 0.3s ease;
  opacity: 0;
}

.item-card:hover .card-overlay {
  opacity: 1;
}

.favorite-btn {
  background-color: white;
  color: var(--primary);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.favorite-btn:hover {
  background-color: var(--primary);
  color: white;
}

.card-content {
  padding: 16px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.location {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--gray);
  font-size: 14px;
}

.location i {
  color: var(--primary);
}

.rating {
  display: flex;
  align-items: center;
}

/* 浏览更多按钮 */
.more-button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.view-more-btn {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 25px;
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  transition: all 0.3s ease;
}

.view-more-btn:hover {
  background: var(--primary);
  color: white;
  transform: translateX(5px);
}

.view-more-btn i {
  transition: transform 0.3s ease;
}

.view-more-btn:hover i {
  transform: translateX(5px);
}

/* 筛选部分 */
.filter-section {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.filter-select {
  width: 150px;
}

/* 分页部分 */
.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-card {
    width: 95vw;
  }
}
.sidebar-wrapper {
  margin-right: 20px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
  z-index: 10;
}
@media (max-width: 992px) {
  .sidebar-wrapper {
    margin-right: 0;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--white);
    padding: 10px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
  }

  .category-menu {
    display: flex;
    overflow-x: auto;
    padding: 10px;
    border-radius: 0;
    box-shadow: none;
  }

  .menu-item {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0 5px;
  }

  .el-menu-item.is-active::before {
    display: none;
  }

  .el-menu-item.is-active {
    background-color: var(--secondary);
    color: white;
  }

  .el-menu-item.is-active i {
    color: white;
  }
}

@media (max-width: 768px) {
  .main {
    padding: 15px;
  }

  .search-title {
    font-size: 22px;
  }

  .card-image {
    height: 150px;
  }
}

@media (max-width: 576px) {
  .category-title {
    font-size: 18px;
  }

  .card-title {
    font-size: 16px;
  }
}
</style>